<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Muhamad Nauval Azhar">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="description" content="This is a login page template based on Bootstrap 5">
	<title>Login</title>
	<link href="/static/bootstrap5/css/bootstrap.min.css" rel="stylesheet">
	<style>
        .custom-margin {
            margin: 0px; /* 你可以根据需要调整这个值 */
        }
    </style>
</head>

<body>

	<section class="h-100">
		<div class="container h-100">
			<div class="row justify-content-sm-center h-100">
				<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
					<div class="text-center my-5">
						<img src="/static/icon/website-login.svg" alt="logo" width="120" class="custom-margin">
					</div>
					<div class="card shadow-lg">
						<div class="card-body p-5">
							<h2 style="margin-bottom: 20px; color: #333;">欢迎回来</h2>
    						<p style="color: #666; margin-bottom: 30px;">请登录您的账户</p>
							<form method="POST" class="needs-validation" novalidate="" autocomplete="off">
								<div class="mb-3">
									<label class="mb-2 text-muted" for="yonghuming">用户名</label>
									<input id="yonghuming" type="text" class="form-control" name="username" required autofocus>
									<div class="invalid-feedback">
										用户名无效
									</div>
								</div>

								<div class="mb-3">
									<div class="mb-2 w-100">
										<label class="text-muted" for="password">密码</label>
										<a href="{{ url_for('acount.user_forgot') }}" class="float-end">
											忘记密码?
										</a>
									</div>
									<input id="password" type="password" class="form-control" name="pwd" required>
								    <div class="invalid-feedback">
								    	填写密码
							    	</div>
								</div>

								<div class="d-flex align-items-center">
									<button type="submit" class="btn btn-primary ms-auto">
										登  录
									</button>
								</div>
								<span style="color: red">{{ error }}</span>
							</form>
						</div>
						<div class="card-footer py-3 border-0">
							<div class="text-center">
								还没有账户? <a href="{{ url_for('acount.user_register') }}" class="text-dark">注  册</a>
							</div>
						</div>
					</div>
					<div class="text-center mt-5 text-muted">
						Copyright &copy; 2025
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- 在模板底部（如 base.html）添加 -->
	<!-- flash消息弹窗 -->
    <div>
        {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                <script>
                {% for category, message in messages %}
                    alert("{{ message }}");  // 使用 JavaScript 弹窗
                {% endfor %}
                </script>
                {% endif %}
        {% endwith %}
    </div>


	<script src="/static/bootstrap5/js/login.js"></script>
</body>
</html>
